{% extends "layout.html" %}

{% block content %}
<script src="../static/js/jquery.min.js" type="text/javascript" charset='utf-8'></script>
<script src="../static/js/echarts.js" charset='utf-8'></script>

<script type="text/javascript">
    // 初始化界面
    $(function () {
        $.ajaxSetup({ async: false });

        $('#li_1').attr('class', '');
        $('#li_2').attr('class', '');
        $('#li_3').attr('class', 'active');
        $('#li_4').attr('class', '');

        // 判断是否登录
        $.get('http://127.0.0.1:5001/check_login', {},
            function (data) {
                console.log(data);
                if (data['login'] === false) {
                    window.location.href = '/'
                }
                else {
                    $('#show_login_reg').hide();
                    $('#index_img').css('height', '95%');
                }
            }
        );

        $.get('http://127.0.0.1:5001/get_all_brands', {},
            function (results) {
                for (var i = 0; i < results.length; i++) {
                    $('#chose_brand').append('<option value="' + results[i] + '">' + results[i] + '</option>');
                }
            }
        );

        function draw_ul(cbrand) {
            $('#myTab').empty();
            $.get('http://127.0.0.1:5001/get_brand_probs/' + cbrand, {},
                function (html) {
                    $('#myTab').append(html);
                }
            );
        }
        function change_callback() {
            var cb = $("#chose_brand").val();
            draw_ul(cb);
        }
        // 获取第一个有效时间的产量等数据
        const hy = $('#chose_brand option:first-child').val();
        draw_ul(hy);

        $('#myTab').find("li").each(function () {
            $(this).click(function () {
                $('#echarts_content').empty();
                const prop = $(this).text();
                const brand = $("#chose_brand").val();
                console.log(brand, prop)

                $('#echarts_content').append(
                    '<div class="row placeholders">' +
                    '<div class="col-xs-12 placeholder" style="height:600px;" id="main1"></div>' +
                    '</div>'
                );

                $.get('http://127.0.0.1:5001/brand_min_max_price/' + prop + '/' + brand, {},
                    function (data) {
                        // 基于准备好的dom，初始化echarts实例
                        var dom = document.getElementById("main1");
                        var myChart = echarts.init(dom);

                        var option = {
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['最高指导价', '最低指导价']
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataZoom: {
                                        yAxisIndex: 'none'
                                    },
                                    dataView: { readOnly: false },
                                    magicType: { type: ['line', 'bar'] },
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                name: '汽车属性',
                                type: 'category',
                                boundaryGap: false,
                                data: data['props']
                            },
                            yAxis: {
                                name: '指导价',
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} 万元'
                                }
                            },
                            series: [
                                {
                                    name: '最高指导价',
                                    type: 'line',
                                    data: data['max_prices'],
                                    markPoint: {
                                        data: [
                                            { type: 'max', name: '最大值' },
                                            { type: 'min', name: '最小值' }
                                        ]
                                    },
                                    markLine: {
                                        data: [
                                            { type: 'average', name: '平均值' }
                                        ]
                                    }
                                },
                                {
                                    name: '最低指导价',
                                    type: 'line',
                                    data: data['min_prices'],
                                    markLine: {
                                        data: [
                                            { type: 'average', name: '平均值' },
                                            [{
                                                symbol: 'none',
                                                x: '90%',
                                                yAxis: 'max'
                                            }, {
                                                symbol: 'circle',
                                                label: {
                                                    position: 'start',
                                                    formatter: '最大值'
                                                },
                                                type: 'max',
                                                name: '最高点'
                                            }]
                                        ]
                                    }
                                }
                            ]
                        };

                        if (option && typeof option === "object") {
                            myChart.setOption(option, true);
                        }
                    }
                );

            })
        });
        $('#first').click();
    });
</script>

<div class="container">
    <!--右边展示-->
    <h3 class="page-header">指导价</h3>
    <div class="col-sm-10" style="font-size: 20px; margin-bottom: 20px;">
        <span>选择汽车品牌行业：</span>
        <select class="combobox" id="chose_brand" style="margin-left: 10px; margin-right: 20px;">
        </select>
    </div>
    <div class="container"></div>
    <ul id="myTab" class="nav nav-tabs">
    </ul>

    <div class="container" id="echarts_content" style="margin-top: 20px;">
    </div>
</div>
</div>

{% endblock %}